<template>
  <el-form
    class="filter-bar"
    :inline="true"
    :model="query"
    size="small"
  >
    <el-form-item>
      <el-input
        v-model="query.userName"
        placeholder="搜索姓名"
        clearable
        @change="handleSearch"
      />
    </el-form-item>
    <el-form-item>
      <el-input
        v-model="query.mobile"
        placeholder="搜索手机号码"
        clearable
         @change="handleSearch"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleReset">重置</el-button>
    </el-form-item>
    <el-form-item>
      <!-- <el-button
        type="primary"
        @click="handleSearch"
      >
        搜索
      </el-button> -->
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'FilterBar',
  props: {
    query: {
      type: Object,
      default: () => {}
    }
  },
  emits: ['udate:query','search'],
  setup(props, { emit }) {
    const handleSearch = () => {
      emit('search', props.query)
    }
    const handleReset = () => {
      emit('reset')
    }
    return {
      handleSearch,
      handleReset
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form--inline .el-form-item{
  margin-right: 0 !important;
  & + .el-form-item {
    margin-left: 10px;
  }
}
</style>
